<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="12">
        <el-card
          shadow="never"
          header="导入(使用mock,有50%几率导入失败)"
        >
          <sc-file-import
            :api-obj="$API.common.importFile"
            template-url="http://www.scuiadmin/file.xlsx"
            @success="success"
          />
          <sc-file-import
            :api-obj="$API.common.importFile"
            :data="{otherData:'demo'}"
            template-url="http://www.scuiadmin/file.xlsx"
            accept=".xls, .xlsx"
            :max-size="30"
            tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)"
            @success="success"
          >
            <template #default="{open}">
              <el-button
                type="primary"
                icon="sc-icon-upload"
                @click="open"
              >
                导入(全配置)
              </el-button>
            </template>
            <template #uploader>
              <el-icon class="el-icon--upload">
                <sc-icon-file-excel />
              </el-icon>
              <div class="el-upload__text">
                将文件拖到此处或 <em>点击选择文件上传</em>
              </div>
            </template>
            <template #form="{formData}">
              <el-form-item label="覆盖已有数据">
                <el-switch v-model="formData.coverage" />
              </el-form-item>
              <el-form-item label="跳过错误数据">
                <el-switch v-model="formData.skipError" />
              </el-form-item>
            </template>
          </sc-file-import>
          <el-descriptions
            :column="1"
            border
            size="small"
            style="margin-top: 15px;"
          >
            <el-descriptions-item
              label="apiObj"
              :width="200"
            >
              Object 文件上传接口对象
            </el-descriptions-item>
            <el-descriptions-item label="data">
              Object 上传时附带的额外参数
            </el-descriptions-item>
            <el-descriptions-item label="accept">
              String 可选择文件类型，默认为".xls, .xlsx"
            </el-descriptions-item>
            <el-descriptions-item label="maxSize">
              Number 可选择文件大小，单位为M，默认为10
            </el-descriptions-item>
            <el-descriptions-item label="tip">
              String 上传框底下的提示语句，默认为"请上传小于或等于 {maxSize}M 的 {accept} 格式文件"
            </el-descriptions-item>
            <el-descriptions-item label="templateUrl">
              String 模板的下载URL
            </el-descriptions-item>
            <el-descriptions-item label="@success">
              事件 上传接口返回的事件，返回function(res, close)，执行close()将关闭窗口
            </el-descriptions-item>
            <el-descriptions-item label="#default=&quot;{open}&quot;">
              插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件
            </el-descriptions-item>
            <el-descriptions-item label="#uploader">
              插糟 自定义上传框插槽
            </el-descriptions-item>
            <el-descriptions-item label="#form=&quot;{formData}&quot;">
              插糟 自定义表单组件，插槽formData都将作为上传时附带的额外参数
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :lg="12">
        <el-card
          shadow="never"
          header="导出"
        >
          <sc-file-export :api-obj="$API.common.exportFile" />
          <sc-file-export
            :api-obj="$API.common.exportFile"
            file-name="人员列表(异步)"
            async
          >
            <template #default="{open}">
              <el-button
                type="primary"
                icon="sc-icon-download"
                @click="open"
              >
                导出(异步)
              </el-button>
            </template>
          </sc-file-export>
          <sc-file-export
            :api-obj="$API.common.exportFile"
            blob
            file-name="人员列表"
            :data="{otherData:'demo'}"
            show-data
            :column="column"
            :file-types="['xlsx','docx','pdf']"
          >
            <template #default="{open}">
              <el-button
                type="primary"
                icon="sc-icon-download"
                @click="open"
              >
                导出(blob文件流)
              </el-button>
            </template>
            <template #form="{formData}">
              <el-form-item label="导出条数">
                <el-select
                  v-model="formData.limit"
                  placeholder="Select"
                >
                  <el-option
                    label="100条"
                    value="100"
                  />
                  <el-option
                    label="500条"
                    value="500"
                  />
                  <el-option
                    label="1000条"
                    value="1000"
                  />
                  <el-option
                    label="5000条"
                    value="5000"
                  />
                  <el-option
                    label="10000条"
                    value="10000"
                  />
                </el-select>
              </el-form-item>
            </template>
          </sc-file-export>
          <el-descriptions
            :column="1"
            border
            size="small"
            style="margin-top: 15px;"
          >
            <el-descriptions-item
              label="apiObj"
              :width="200"
            >
              Object 文件导出接口对象，通过apiObj.url请求文件
            </el-descriptions-item>
            <el-descriptions-item label="data">
              Object 上传时附带的额外参数(可为数据表格的过滤项)
            </el-descriptions-item>
            <el-descriptions-item label="showData">
              Boolean 是否显示附带的额外参数
            </el-descriptions-item>
            <el-descriptions-item label="async">
              Boolean 是否异步导出文件
            </el-descriptions-item>
            <el-descriptions-item label="fileName">
              String 下载文件名称，默认为当前时间戳
            </el-descriptions-item>
            <el-descriptions-item label="fileTypes">
              Array 可选择文件类型，默认为['xlsx']，组件将数组第一项当做已选项
            </el-descriptions-item>
            <el-descriptions-item label="column">
              Array 列配置，请求文件时将添加column为key的参数，值为prop逗号","分割的字符串
            </el-descriptions-item>
            <el-descriptions-item label="blob">
              Boolean 是否由游览器请求文件返回blob后提供下载
            </el-descriptions-item>
            <el-descriptions-item label="progress">
              Boolean blob开启后是否显示下载文件进度条，当服务器启用Gzip时，建议关闭，因为获取到的文件总数和下载总数不匹配。
            </el-descriptions-item>

            <el-descriptions-item label="#default=&quot;{open}&quot;">
              插糟 默认触发按钮插糟，返回open()打开窗口函数，可以绑定元素@click事件
            </el-descriptions-item>
            <el-descriptions-item label="#form=&quot;{formData}&quot;">
              插糟 自定义表单组件，插槽formData都将作为请求时附带的额外参数
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </el-main>

  <el-dialog
    v-model="importErrDialogVisible"
    title="导入失败"
    :width="680"
    destroy-on-close
    @closed="()=>{importErrData={}}"
  >
    <el-alert
      :title="`总条目数 ${importErrData.ok} ,其中有 ${importErrData.fail} 条格式不满足导入要求，请修改后再次操作。`"
      type="error"
      show-icon
      :closable="false"
    />
    <div style="margin-top: 15px;">
      <el-table
        :data="importErrData.failList"
        border
        stripe
        max-height="270"
        style="width: 100%"
      >
        <el-table-column
          prop="keyName"
          label="主键名"
          width="180"
        />
        <el-table-column
          prop=""
          label="状态"
          width="100"
        >
          <el-tag type="danger">
            <el-icon><el-icon-circle-close-filled /></el-icon> 失败
          </el-tag>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="原因"
        />
      </el-table>
    </div>
    <template #footer>
      <el-button
        type="primary"
        @click="importErrDialogVisible=false"
      >
        我知道了
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import scFileImport from '@/components/scFileImport'
import scFileExport from '@/components/scFileExport'

export default {
  name: 'Importexport',
  components: {
    scFileImport,
    scFileExport
  },
  data() {
    return {
      importErrDialogVisible: false,
      importErrData: {},
      column: [
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "性别",
          prop: "sex"
        },
        {
          label: "评分",
          prop: "num"
        },
        {
          label: "邮箱",
          prop: "email",
          hide: true
        },
        {
          label: "进度",
          prop: "progress"
        },
        {
          label: "注册时间",
          prop: "datetime"
        }
      ]
    }
  },
  mounted() {

  },
  methods: {
    success(res, close){
      if(res.code==200){
        this.$alert("导入返回成功后，可后续操作，比如刷新表格等。执行回调函数close()可关闭上传窗口。", "导入成功", {
          type: "success",
          showClose: false,
          center: true
        })
        close()
      }else{
        //返回失败后的自定义操作，这里演示显示错误的条目
        this.importErrDialogVisible = true
        this.importErrData = res.data
      }

    }
  }
}
</script>

<style>

</style>
